const path = require("path");
const HtmlWebpackPlugin = require("html-webpack-plugin");
const MiniCssExtractPlugin = require('mini-css-extract-plugin')

module.exports = {
  // 入口 相对路径文件夹文件名
  mode:'production',
  entry: "./src/main.js",
  // 出口
  output: {
    // 打包出口所在目录 使用path内置模块join方法拼接绝对路径
    path: path.join(__dirname, "./dist"),
    // 输出打包好的文件名
    filename: "bundle.js",
  },
  // html-webpack-plugin 配置
  plugins: [
    // 实例化
    new HtmlWebpackPlugin({
      // 源文件路径
      template: "./public/index.html",
    }),
    new MiniCssExtractPlugin({
      filename: "./css/index.css",
    })
  ],
  module: {
    rules: [
      {
        test: /\.css$/i,
        use: ["style-loader", "css-loader"],
      },
      {
        test: /\.less$/i,
        use: ["style-loader", "css-loader","less-loader"],
      },
      {
        test: /\.(png|jpg|gif|jpeg|bmp)$/i,
        type: 'asset'
      },
      {
        test: /\.(eot|svg|ttf|woff|woff2)$/i,
        type: 'asset/resource',
        generator: {
          filename: 'fonts/[name]-[hash:4][ext]'
        }
      },
      {
        test: /\.js$/,
        exclude: /(node_modules|bower_components)/,
        use: {
          loader: 'babel-loader',
          options: {
            // 配置语法预设包
            presets: ['@babel/preset-env']
          }
        }
      },
      {
        test: /\.css$/,
        use: [
          MiniCssExtractPlugin.loader,
          "css-loader"
        ],
      }
    ],
  },
};
